import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { SongItemWrapper } from './style'

interface IProps {
  children?: ReactNode,
  item: any
}

const ComponentName: FC<IProps> = (props) => {
  const { item } = props
  return (
    <SongItemWrapper>
      <div className="header_item">
        <img src={item.picUrl} className="image" />
        <span className="sprite_cover image_cmask"></span>
        <div className="button_mask sprite_cover">
          <div className="left">
            <span className="icon_headset sprite_icon"></span>
            <span className="count">{item.playCount}</span>
          </div>
          <div className="right">
            <span className="icon_play sprite_icon"></span>
          </div>
        </div>
      </div>
      <span className="item_name">{item.name}</span>
    </SongItemWrapper>
  )
}

export default memo(ComponentName)
